<template>
	<view>
		<navigation-custom :config="config" :wrapperStyle = "wrapperStyle" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight">
			<view class="slot">
				<image src="../../static/index/1.jpg"></image>
				<view class="author">不动卿奥森</view>
				<view class="opt u-f-ajc u-f-jsb">
					<view class="my-works">
						<text class="num">28</text><br/>
						作品
					</view>
					<text></text>
					<view class="my-likes">
						<text class="num">821</text><br/>
						喜欢
					</view>
				</view>
				<view class="deco"></view>
			</view>
		</navigation-custom>
		<view class="content">
			<block v-for="(item,index) in list" :key="index">
						<home-list-item :item="item"
						:index="index"></home-list-item>
						
					</block>
		</view>
	</view>
</template>

<script>
	import navigationCustom from "@/components/common/navigation-custom.vue";
		import homeListItem from "@/components/me/home-list-item.vue";
	export default {
		components: {
			navigationCustom,
			homeListItem
		},
		data() {
			return {
				// 自定义导航栏
				config: {
					title: "我的", //title
					bgcolor: "#457EEC", //背景颜色
					fontcolor:"#FFF", //文字颜色，默认白色
					type: 2, //type 1，3胶囊 2，4无胶囊模式
					transparent: true, //是否背景透明 默认白色
					linear: true, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/icon/back_.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字,
					
				},
				wrapperStyle: {
					height:530,
					backgroundColor:'#457EEC'
				},
				scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200, //滑动的高度限制，超过这个高度即背景全部显示
				// 功能列表
				list:[
									{ img:"my-work.png",name:"我的作品",clicktype:"navigateTo",url:"me/my_work/my_work" },
									{ img:"feedback.png",name:"意见反馈",clicktype:"navigateTo",url:"../../pages/user-set-userinfo/user-set-userinfo" }
								]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.content {
	padding: 30upx 32upx 0;
	}
.slot {
	color: rgba(255,255,255,.5);
	font-size: 28upx;
	text-align: center;
	>image {
		width: 110upx;
		height: 110upx;
		border-radius: 50%;
		margin-top: 35upx;
		border:4px solid rgba(255,255,255,1);
	}
	.author {
		color: rgba(255,255,255,1);
		font-size: 36upx;
		font-weight:500;
	}
	.opt {
		position: relative;
		margin-top: 14upx;
		line-height: 1.5;
		padding-left: 168upx;
		padding-right: 168upx;
		text {
			color: rgba(255,255,255,1);
			font-size: 36upx;
		}
		>text {
			width:1upx;
			height:30upx;
			background:rgba(230,230,230,1);
		}
	}
	.deco {
		height: 33rpx;
		margin-top: 16rpx;
		background:rgba(255,255,255,1);
		border-radius:50upx 50upx 0px 0px;
	}
}
</style>
